<template>
  <div class="app-container">
    <NavBarBread :bread="breadList">
      <el-button v-show="activeIndex === 1" type="text" @click="handelAdd">新增</el-button>
      <el-button v-show="activeIndex === 1" type="text" @click="handelExport">导出</el-button>
      <el-button v-show="activeIndex === 3" type="text" @click="handelExportDealer">导出</el-button>
      <el-button v-show="activeIndex === 3" type="text" @click="handelAdd">新增</el-button>
      <el-button v-show="activeIndex === 4" type="text" @click="handelExportSingle">导出</el-button>
      <el-button v-show="activeIndex === 4" type="text" @click="handelImport">导入</el-button>
      <el-button v-show="activeIndex === 4" type="text" @click="handelAdd">新增</el-button>
    </NavBarBread>
    <div class="tool-container">
      <div class="toggle-alarm">
        <div v-for="(item, index) in tabs" :key="item.key" :class="[index === activeIndex ? 'isActive' : '']" @click="toggleTbas(index)">{{ item.text }}</div>
      </div>
    </div>
    <div class="section-container">
      <transition name="fade-transform" mode="out-in">
        <!-- 公户车白名单 -->
        <car-white v-if="activeIndex === 0" ref="carWhite" />
        <!-- 城市白名单 -->
        <city-white v-if="activeIndex === 1" ref="cityWhite" />
        <!-- 车型白名单 -->
        <vehicle-model-white v-if="activeIndex === 2" ref="vehicleModelWhite" />
        <!-- 经销店白名单 -->
        <dealer-white v-if="activeIndex === 3" ref="dealerWhite" />
        <!-- 车辆白名单 -->
        <car-new-white v-if="activeIndex === 4" ref="carNewWhite" />
      </transition>
    </div>
    <!-- <white-dialog ref="whiteDialog" :visible="dialogVisible" :is-edit="isEdit" @close="closed" /> -->
  </div>
</template>
<script>
import carWhite from './components/carWhite'
import carNewWhite from './components/carNewWhite'
import dealerWhite from './components/dealerWhite'
import cityWhite from './components/cityWhite'
import vehicleModelWhite from './components/vehicleModelWhite'
// import whiteDialog from './components/whiteDialog'
import NavBarBread from '@/components/NavBarBread'
import { exportWhitelist, exportWhiteListDealer } from '@/api/crossRegionalMonitoring'
import { exportExcelByBlob } from '@/utils/public'
export default {
  name: 'RuleManage',
  components: { carWhite, cityWhite, vehicleModelWhite, NavBarBread, carNewWhite, dealerWhite },
  data() {
    return {
      tabs: [
        { text: '公户车白名单', key: 0 },
        { text: '城市白名单', key: 1 },
        { text: '车型白名单', key: 2 },
        { text: '经销店白名单', key: 3 },
        { text: '车辆白名单', key: 4 },
      ],
      activeIndex: 0,
      isEdit: false,
      dialogVisible: false
    }
  },
  created() {
    this.initBread()
  },
  methods: {
    initBread() {
      this.breadList = [this.$route.meta.parentName, this.$route.meta.menuName, '公户车白名单']
    },
    toggleTbas(index) {
      this.activeIndex = index
      this.breadList = [this.$route.meta.parentName, this.$route.meta.menuName, this.tabs[index].text]
    },
    handelAdd() {
      if (this.activeIndex === 1) {
        this.$refs.cityWhite.handelAdd()
      } else if (this.activeIndex === 3) {
        this.$refs.dealerWhite.handelAdd()
      } else {
        this.$refs.carNewWhite.handelAdd()
      }
    },
    handelImport() {
      this.$refs.carNewWhite.handelImport()
    },
    handleEdit(params) {
      // this.currentCitys = params
      // this.dialogVisible = true
      // this.isEdit = true
      // this.$refs.whiteDialog.ruleForm = params
      // this.$refs.whiteDialog.effectiveEndTime = params.effectiveEndTime
      // this.$refs.whiteDialog.cityChangeSelect(params.cityCode)
    },
    closed() {
      this.dialogVisible = false
      this.$refs.cityWhite.queryTableList()
      this.$refs.cityWhite.queryWhiteListCityTreesAsOptions()
    },
    handelExport() {
      const params = this.$refs.cityWhite.complexForm
      exportWhitelist(params).then(res => {
        const { data } = res
        const fileName = `${this.$route.meta.menuName}.xlsx`
        exportExcelByBlob(data, fileName)
      })
    },
    handelExportDealer() {
      const params = this.$refs.dealerWhite.simpleForm
      exportWhiteListDealer(params).then(res => {
        const { data } = res
        const fileName = `经销店白名单.xlsx`
        exportExcelByBlob(data, fileName)
      })
    },
    handelExportSingle() {
      this.$refs.carNewWhite.handelExport()
    }
  }
}
</script>
<style lang="scss" scoped>
  .tool-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    .toggle-alarm{
        display: flex;
        margin-bottom: 20px;
        line-height: 40px;
        div{
          border: 1px solid rgba(121, 121, 121, 1);
          text-align: center;
          border-radius: 5px;
          margin-right: 30px;
          cursor: pointer;
          padding: 0 15px;
        }
        .isActive{
          color: #fff;
          background: rgba(5, 167, 171, 1);
          border-color: rgba(5, 167, 171, 1);
        }
    }
  }
</style>
